<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue js</title>
    <style>
        .completed {
            text-decoration: line-through;
        }

        .something {
            color: red;
        }
    </style>
</head>

<body>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.js"></script>
<div class="container">
    <div id="app">
        <div v-if="!image">
            <h2>Select an image</h2>
            <input type="file" @change="onFileChange">
        </div>
        <div v-else>
            <img :src="image" />
            <button @click="removeImage">Remove image</button>
        </div>
        </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            image: ''
        },
        methods: {
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },
            createImage(file) {
                var image = new Image();
                var reader = new FileReader();
                var vm = this;

                reader.onload = function (e) {
                    vm.image = e.target.result;
                };
                reader.readAsDataURL(file);
            },
            removeImage: function (e) {
                this.image = '';
            }
        }
    })
</script>
</body>

</html>

